<template>
  <div v-if="detailDatas" class="swiper-outer">
    <section class="swiper-box" ref="swiperBox">
      <mt-swipe :auto="0" :show-indicators="false" :continuous="false" :speed="200" :defaultIndex="messageid.index" @change="handleChange">
        <mt-swipe-item v-if="detailDatas.User" class="swiper-list">
          <div class="item-box" v-if="activeIndex == 0">
            <user-detail></user-detail>
          </div>
        </mt-swipe-item>
        <mt-swipe-item v-if="detailDatas.MessageDetails" v-for="(item,listIndex) in detailDatas.MessageDetails" :key="listIndex" class="swiper-list">
          <div v-if="item.Type == 0 && listIndex == activeIndex - 1" class="item-box">
            <pic-theme :index="activeIndex-1"></pic-theme>
          </div>
          <div v-if="(item.Type == 1 || item.Type == 2) && listIndex == activeIndex - 1" class="item-box">
            <voice-theme :index="activeIndex-1"></voice-theme>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </section>
  </div>
</template>

<script>
import { Toast,Swipe, SwipeItem } from "mint-ui";
import { fetch } from '../assets/api';
import userDetail from './userDetail';
import picTheme from './picClarify';
import voiceTheme from './voice';
import API from '../assets/js/fetchAPI';
export default {
  components: {
    'mtSwipe':Swipe,
    'mtSwipeItem':SwipeItem,
    userDetail,
    picTheme,
    voiceTheme
  },
  props:{
    messageid:{

    }
  },
  data() {
    return {
      detailDatas:null,
      activeIndex:this.messageid.index
    };
  },
  created(){
    console.log('传过来的ID',this.messageid);
    if(this.messageid.type == 1){
      this.getIdDetail();
    }else{
      this.getMeetDetail();
    }
  },
  mounted() {
    
  },
  methods: {
    // 返回
    back() {
      history.back();
    },
    //请求单条附近行家
    async getIdDetail(){
      let detail = await fetch(API.messageDetail,{PostMessageId:this.messageid.id,OpenId:this.messageid.OpenId});
      this.$store.commit('detailDatas', detail.Result); 
      this.detailDatas = detail.Result;
      console.log('当条信息详细',detail);
    },
    //请求单条约见信息
    async getMeetDetail(){
      let info = await fetch(API.getMeetList,{AskToSeeId:this.messageid.id,OpenId:this.messageid.OpenId});
      let meetInfo = info.Result;
      let meetItem = meetInfo.MessageDetails;
      if(meetItem){
        meetItem[0].Type = 0;
        //后端字段不统一，统一后可去除该判断
        if(meetItem[0].Monery){
          meetItem[0].Money = meetItem[0].Monery;
        }
      }
      this.$store.commit('detailDatas', meetInfo);
      this.detailDatas = meetInfo;
      console.log('单条约见信息啊啊5 ',meetInfo);
    },
    handleChange(ind) {
      this.activeIndex = ind;
    }
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.swiper-outer{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  .swiper-box{
    width:100%;
    flex:1;
    .swiper-list{
      //overflow-y: scroll;
      position: fixed;
      top:0;
      background: #fff;
      bottom: 0;
      .item-box{
        height:100%;
      }
    }
  }
}

/* swiper */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background: #fff;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
